<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2024/4/7
  Time: 11:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User List</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <style>
        /* 基础样式 */
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
        }

        /* 表格样式 */
        .table-container {
            background-color: #fff;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .table-styled {
            width: 100%;
            border: none;
        }

        .table-styled thead {
            background-color: #555;
            color: #fff;
        }

        .table-styled th,
        .table-styled td {
            text-align: center;
            padding: 15px;
            border: none;
        }

        .table-styled tbody tr:nth-child(odd) {
            background-color: #eaeaea;
        }

        /* 链接和图标样式 */
        .link-container {
            display: inline-block;
            margin: 0 5px;
            transition: transform 0.3s ease;
        }

        .link-container:hover {
            transform: translateY(-2px);
        }

        .icon-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: #007bff;
            border-radius: 50%;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .icon-link:hover {
            background-color: #0056b3;
        }

        /* 图标颜色变化 */
        .view-link .fas {
            color: #28a745; /* 绿色查看图标 */
        }

        .edit-link .fas {
            color: #ffc107; /* 黄色编辑图标 */
        }

        .delete-link .fas {
            color: #dc3545; /* 红色删除图标 */
        }

        /* 分页样式 */
        .pagination {
            margin: 30px 0;
            text-align: center;
        }

        .pagination ul {
            display: inline-block;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .pagination ul li {
            display: inline;
            margin-right: 5px;
        }

        .pagination ul li a {
            display: block;
            padding: 8px 15px;
            background-color: #007bff;
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .pagination ul li a:hover,
        .pagination ul li a.active {
            background-color: #0056b3;
        }

        /* 底部样式 */
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 20px;
            position: relative;
            bottom: 0;
            width: 100%;
        }

        /* 表格容器 */
        .table-container {
            overflow: hidden;
            background: linear-gradient(135deg, #7f5a83, #0d324d);
            color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* 表格样式 */
        .styled-table {
            width: 100%;
            border-collapse: collapse; /* 确保边框合并以获得干净的外观 */
            table-layout: fixed; /* 固定表格布局，以确保列宽一致 */
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            overflow: hidden;

        }

        .styled-table th,
        .styled-table td {
            text-align: center; /* 水平居中对齐文本 */
            vertical-align: middle; /* 垂直居中对齐文本 */
            padding: 10px;
            /*border: 1px solid rgba(255, 255, 255, 0.3); !* 添加边框以区分单元格 *!*/
        }

        /* 表头样式 */
        .styled-table thead th {
            background-color: rgba(0, 0, 0, 0.2);
            color: #fff;
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 0.5px;
            position: relative;
            padding: 10px;
        }

        /* 表头渐变效果 */
        .styled-table thead th:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to left, #ff8177, #ff867a, #ff8c7f, #f88f76);
        }

        /* 表格内容样式 */
        .styled-table tbody td {
            background-color: rgba(255, 255, 255, 0.05);
            color: #fff;
            padding: 12px;
            text-align: center;
            transition: all 0.3s ease;
        }

        /* 鼠标悬浮效果 */
        .styled-table tbody tr:hover td {
            background-color: rgba(255, 255, 255, 0.1);
            transform: scale(1.02);
        }

        /* 行之间的间隔 */
        .styled-table tbody tr:nth-child(even) td {
            background-color: rgba(255, 255, 255, 0.08);
        }

        /* 操作链接样式 */
        .operation-icons .icon-link {
            display: inline-flex; /* 确保图标和文本在一行内垂直居中 */
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
            margin: 0 5px;
            transition: color 0.3s ease;
        }

        .link-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .operation-icons .icon-link:hover {
            color: #ffdd67;
        }

    </style>
    <script>

        window.onload = function () {
            // 获取所有的删除链接
            var deleteLinks = document.querySelectorAll('.delete-link');

            // 为每个删除链接添加点击事件监听器
            deleteLinks.forEach(function (link) {
                link.onclick = function (event) {
                    // 阻止链接默认的导航行为
                    event.preventDefault();

                    // 弹出确认对话框
                    var confirmDelete = confirm('您确定要删除这个用户吗？');
                    if (confirmDelete) {
                        // 如果用户点击“确定”，则通过表单提交或AJAX请求来处理删除操作
                        // 这里以表单提交为例，假设有一个隐藏的表单用于提交删除请求
                        var form = document.createElement('form');
                        form.style.display = 'none';
                        form.method = 'POST';
                        form.action = this.href;

                        // 添加用户ID作为隐藏字段
                        var userIdInput = document.createElement('input');
                        userIdInput.type = 'hidden';
                        userIdInput.name = 'user_id';
                        userIdInput.value = this.href.match(/user_id=(\d+)/)[1];
                        form.appendChild(userIdInput);
                        // 将表单添加到文档中并提交
                        document.body.appendChild(form);
                        form.submit();
                    }
                };
            });
        };
    </script>

</head>
<body>

<%@ include file="header.jsp" %>
<h3 style="text-align: center;">用户列表</h3>
<div class="table-container">
    <table class="styled-table">
        <tr>
            <th>Number</th>
            <th>Username</th>
            <th>phone</th>
            <th>email</th>
            <th>role</th>
            <th>state</th>
            <th>create_time</th>
            <th>operation</th>
        </tr>
        <c:forEach items="${userList}" var="User" varStatus="row">
            <c:if test="${User.userId != user.userId || user.role != 0}">
                <tr>
                    <td>${row.index + 1}</td>
                    <td>${User.userName}</td>
                    <td>${User.phone}</td>
                    <td>${User.email}</td>
                    <td>
                        <c:choose>
                            <c:when test="${User.role == 1}">普通用户</c:when>
                            <c:when test="${User.role == 0}">管理员</c:when>
                        </c:choose>
                    </td>
                    <td>${User.userStatus == 1 ? "启用" : "禁用"}</td>
                    <td><fmt:formatDate value="${User.createdTime}" pattern="yyyy-MM-dd"/></td>
                    <td>
                        <div class="link-container">
                            <a href="#" class="icon-link view-link" title="查看">
                                <i class="fas fa-eye"></i>
                            </a>
                        </div>
                        <div class="link-container">
                            <a href="${pageContext.request.contextPath}/changeUserStatus?userId=${User.userId}"
                               class="icon-link edit-link" title="修改状态">
                                <i class="fas fa-edit"></i>
                            </a>
                        </div>
                        <div class="link-container">
                            <a href="${pageContext.request.contextPath}/UserDel.do?user_id=${User.userId}"
                               class="icon-link delete-link" title="删除"
                               onclick="return confirm('您确定要删除这个用户吗？')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </div>
                    </td>
                </tr>
            </c:if>
        </c:forEach>
    </table>
</div>

<div class="pagination">
    <ul>
        <!-- Assuming totalPages variable contains the total number of pages, and currentPage variable contains the current page number -->
        <c:forEach var="page" begin="1" end="${totalPage}" step="1">
            <li${page == currentPage ? ' class="active"' : ''}>
                <a href="${pageContext.request.contextPath}/UserPage.do?currentPage=${page}&pageSize=${pageSize}">${page}</a>
            </li>
        </c:forEach>
    </ul>
</div>

<%@ include file="footer.jsp" %>
</body>
</html>

